<template>
  <up-popup
    :show="show"
    @close="close"
    mode="bottom"
    bgColor="#000"
    radius="16rpx">
    <view class="bg-[#000] border border-[#B51A26] rounded-t-[16rpx] relative">
      <view class="py-[30rpx] flex items-center">
        <image
          class="w-[40rpx] h-[40rpx]"
          src="../static/images/common/arrow.png"
          mode="scaleToFill" />
        <view class="text-[34rpx] text-white">{{ title }}</view>
      </view>
      <slot></slot>
      <image
        class="w-[64rpx] h-[64rpx] absolute top-0 right-[24rpx] -translate-y-[50%]"
        src="../static/images/common/close.png"
        mode="scaleToFill"
        @click="close" />
    </view>
  </up-popup>
</template>

<script setup>
const emit = defineEmits("close");
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
});
const close = () => {
  emit("close");
};
</script>

<style lang="scss" scoped></style>
